<template>
	<view style="height: 1100px">
		<!-- 		<uni-section title="" subTitle="" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar dark @clickLeft="back" color="#eee" backgroundColor="#245b9f" height="98rpx" shadow
					left-icon="left" title="矿山企业" leftText="">
					<block slot="right">
						<view>
							<picker mode="selector" :range="range" @change="bindDateChange"
								style="display: inline-block;">
								<view class="uni-input">{{currentYear}}年</view>
							</picker>
							<u-icon name="arrow-down" color="#fff"
								style="display: inline-block; margin: 5px 5px 5px 5px;"></u-icon>
						</view>
					</block>
				</uni-nav-bar>
			</view>
		</uni-section> -->

		<uni-card>
			<view class="bg">
				<text>营业状态</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				<image class="yyzt" src="../../../static/images/fenxi/yyzt.png">
				</image>
			</view>
		</uni-card>
		<uni-card>
			<view class="bg">
				<text>证书</text>
			</view>
			<view class="charts-box1">
				<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				<image class="yyzt" src="../../../static/images/fenxi/zs.png"> </image>
			</view>
		</uni-card>
		<uni-card>
			<view class="bg">
				<text>风险统计</text>
			</view>
			<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
		</uni-card>
	</view>
</template>

<script>
	import {
		enterpriseList
	} from "@/api/enterprise.js";
	export default {
		data() {
			return {
				range: ['2021', '2022'],
				currentYear: new Date().getFullYear(),
				str2: {},
				chartData: {},
				chartData1: {},
				chartData2: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: [
						"#4ab585",
						"#34948d",
						"#8b5abf",
						"#efb226",
						"#ce383c",
						"#19609d",
					],
					padding: [5, 30, 5, 15],
					dataLabel: true,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 15,
							offsetAngle: 100,
							labelWidth: 15,
							border: true,
							borderWidth: 8,
							borderColor: "#fff",
						},
						tooltip: {
							showBox: false,
						},
					},
				},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#47b884", "#f6ad29"],
					padding: [5, 30, 5, 15],
					dataLabel: true,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 15,
							offsetAngle: -90,
							labelWidth: 15,
							border: true,
							borderWidth: 5,
							borderColor: "#fff",
						},
						tooltip: {
							showBox: false,
						},
					},
				},
				opts2: {
					padding: [15, 15, 0, 5],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: "12",
						fontColor: "#8C8C8C",
					},
					yAxis: {
						data: [{
							min: 0,
							title: "(次)",
						}, ],
						showTitle: true,
						gridType: "dash",
						dashLength: 10,
						height: 233,
						// splitNumber: 4,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							customColor: ["#185F9A", "#51B4CB"],
							colorStop: 1,
						},
					},
				},
			};
		},
		onReady() {
			this.getServerData();
			this.getEnterpriseList();
		},
		methods: {
			getServerData() {},
			bindDateChange(e) {
				// console.log(this.range[e.detail.value])
				this.currentYear = this.range[e.detail.value]
			},

			// 自定义菜单点击返回
			back() {
				this.$tab.switchTab("/pages/analyse/index");
				// uni.navigateBack({
				// 	delta: 1
				// })
			},
			//企业矿山列表
			getEnterpriseList() {
				enterpriseList()
					.then((result) => {
						const str = result.data.enterpriseInfoBusinessStatus.chartData.map(
							(item) => {
								return item;
							}

						);
						const str1 = result.data.enterpriseInfoCertificate.chartData.map(
							(item) => {
								return item;
							}
						);

						this.str2 = result.data

						let res = {
							series: [{
								data: [{
										name: str[0].name,
										value: str[0].proportion,
										labelText: str[0].name + `${str[0].value}%`,
									},
									{
										name: str[1].name,
										value: str[1].proportion,
										labelText: str[1].name + `${str[1].value}%`,
									},
									{
										name: str[2].name,
										value: str[2].proportion,
										labelText: str[2].name + `${str[2].value}%`,
									},
									{
										name: str[3].name,
										value: str[3].proportion,
										labelText: str[3].name + `${str[3].value}%`,
									},
									{
										name: str[4].name,
										value: str[4].proportion,
										labelText: str[4].name + `${str[4].value}%`,
									},
									{
										name: str[5].name,
										value: str[5].proportion,
										labelText: str[5].name + `${str[5].value}%`,
									},
								],
							}, ],
						};

						let res1 = {
							series: [{
								data: [{
										name: str1[0].name,
										value: str1[0].proportion,
										labelText: str1[0].name + `${str1[0].value}%`,
									},
									{
										name: str1[1].name,
										value: str1[1].proportion,
										labelText: str1[1].name + `${str1[1].value}%`,
									},
								],
							}, ],
						};


						let res2 = {
							categories: this.str2.enterpriseInfoRisk.x,
							series: [{
								name: "",
								data: this.str2.enterpriseInfoRisk.y,
							}, ],
						};

						this.chartData = JSON.parse(JSON.stringify(res));
						this.chartData1 = JSON.parse(JSON.stringify(res1));
						this.chartData2 = JSON.parse(JSON.stringify(res2));
						// enterpriseListData = result.data
						console.log(str);
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<style scoped>
	.bg {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		margin-left: -42rpx;
		margin-top: -20rpx;
		background-image: url(../../../static/images/fenxi/jx01.png);
		background-size: 200rpx 80rpx;
		background-repeat: no-repeat;
		color: #185f9a;
		font-size: 32rpx;
		font-weight: 700;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		position: relative;
	}

	.charts-box1 {
		width: 100%;
		height: 300px;
		position: relative;
	}

	.yyzt {
		width: 20%;
		height: 20%;
		position: absolute;
		left: 40%;
		top: 40%;
	}

	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: $mk-base-color;

			.navbar-content {
				padding: 0 15px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 45px;

				.navbar-search {
					display: flex;
					align-items: center;
					padding: 0 10px;
					width: 100%;
					height: 30px;
					border-radius: 30px;
					background-color: #fff;

					.navbar-search_icon {
						margin-right: 10px;
					}

					.navbar-search_text {
						width: 100%;
						font-size: 14px;
						color: #999;
					}
				}
			}
		}
	}

	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	// #ifdef APP-PLUS
	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	.box1 {
		.charts-box {
			.sg {
				width: 19%;
				height: 8%;
				position: absolute;
				left: 41%;
				top: 32% !important;
			}
		}
	}

	// #endif


	.u-popup div {
		z-index: 999 !important;
	}
</style>
